<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>询价列表 -供方</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
      .search-group-left { font-size: 13px; border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px 0 0 3px; border-right: none }
      .search-group-right { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 0 3px 3px 0 }
    </style>
  </head>
  <body>
    <div id="q-rfxPurList" v-cloak>
      <q-layout>
        <q-page-container>
          <q-tabs inverted color="primary" v-model="selectedTab">
            <q-tab slot="title" name="tab-1" label="全部"></q-tab>

            <q-tab-pane name="tab-1" class="q-pa-none">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="q-pa-sm  relative-position" >
                  <div class="row justify-end">
                      <q-input 
                        class="search-group-left"
                        hide-underline
                        placeholder="输入名称、编码"
                        v-model.trim="searchForm.value"></q-input>
                      <q-select 
                        class="search-group-right"
                        hide-underline
                        radio
                        :options="[{ label:'主题', value: 'title' }, { label:'编码', value: 'code' }]"
                        v-model="searchForm.key"></q-select>
                      <q-btn
                        size="sm"
                        color="primary"
                        :loading="btnLoadingSearch"
                        @click="search"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          搜索中
                        </span>
                        <q-icon name="search"></q-icon>
                        <span>{{ $t('查询') }}</span>
                      </q-btn>
                      <q-btn
                        size="sm"
                        color="secondary"
                        @click="reset"
                        :loading="btnLoadingReset"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          重置中
                        </span>
                        <q-icon name="refresh" ></q-icon>
                        <span>{{ $t('重置') }}</span>
                      </q-btn>
                    </div>
                  <q-table
                    class="no-shadow"
                    :data="tableData"
                    dense
                    hide-bottom
                    :columns="columnsOne"
                    :rows-per-page-options="[5, 10, 20]"
                    selection="multiple"
                    :loading="listLoading"
                    :selected.sync="selectedOne"
                    :pagination.sync="serverPagination"
                    @request="listGet"
                    row-key="id"
                  >
                    <template slot="body" slot-scope="props">
                      <q-tr
                        :props="props"
                      >
                        <q-td>
                          <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                        </q-td>
                        <q-td key="action" :props="props">
                        <q-btn
                            flat
                            size="xs"
                            color="primary"
                            class="q-pa-xs"
							              @click="vendorEnquiryPriceView(props.row.rfqHeaderEntity.id,props.row.id)"
                          >
                            {{ $t('查看') }}
                          </q-btn>
                          <q-btn
                            flat
                            size="xs"
                            color="primary"
                            v-if=" props.row.rfqHeaderEntity.isClose != 1 && props.row.rfqHeaderEntity.isSignUp == 1 && props.row.signUpStatus==0"
                            class="q-pa-xs"
							              @click="vendorSignUp(props.row.rfqHeaderEntity.id,props.row.id)"
                          >
                            {{ $t('报名') }}
                          </q-btn>
                          <q-btn
                            flat
                            size="xs"
                            color="primary"
                            class="q-pa-xs"
                            v-else-if="props.row.rfqHeaderEntity.isClose != 1 && props.row.rfqHeaderEntity.isSignUp == 0 && props.row.rfqHeaderEntity.isTr == 1 && !props.row.trFileId"
                            @click="uploadedTrFile(props.row.id)"
                          >
                            {{ $t('上传TR') }}
                          </q-btn>
                          <q-btn
                            flat
                            size="xs"
                            color="primary"
                            class="q-pa-xs"
                            v-else-if="(props.row.rfqHeaderEntity.isClose != 1 && props.row.trFileId && props.row.quoteStatus != 1)||(props.row.rfqHeaderEntity.isClose != 1 && props.row.quoteStatus != 1)"
							              @click="vendorQuotedPrice(props.row.rfqHeaderEntity.id,props.row.id)"
                          >
                            {{ $t('报价') }}
                          </q-btn>
                        </q-td>
                        <q-td key="code" :props="props" >
                          <q-btn
                            flat
                            color="primary"
                            class="q-pa-none"
                            @click="vendorEnquiryPriceView(props.row.rfqHeaderEntity.id,props.row.id)">
                            {{ props.row.rfqHeaderEntity.code }}
                          </q-btn>
                        </q-td>
                        <q-td key="title" :props="props" >
                          {{ props.row.rfqHeaderEntity.title }}
                        </q-td>
                        <q-td key="isOfficial" :props="props" >
                          <q-chip v-if="props.row.rfqHeaderEntity.isOfficial == 1" dense square color="positive">是</q-chip>
                          <q-chip v-if="props.row.rfqHeaderEntity.isOfficial == 0" dense square color="light">否</q-chip>
                        </q-td>
                        <q-td key="isSeal" :props="props" >
                          <q-chip v-if="props.row.rfqHeaderEntity.isSeal == 1" dense square color="positive">是</q-chip>
                          <q-chip v-if="props.row.rfqHeaderEntity.isSeal == 0" dense square color="light">否</q-chip>
                        </q-td>
                        <q-td key="isTr" :props="props" >
                          <q-chip v-if="props.row.rfqHeaderEntity.isTr == 1" dense square color="positive">是</q-chip>
                          <q-chip v-if="props.row.rfqHeaderEntity.isTr == 0" dense square color="light">否</q-chip>
                        </q-td>
                        <q-td key="isSignUp" :props="props" >
                          <q-chip v-if="props.row.rfqHeaderEntity.isSignUp == 1" dense square color="positive">是</q-chip>
                          <q-chip v-if="props.row.rfqHeaderEntity.isSignUp == 0" dense square color="light">否</q-chip>
                        </q-td>
                        <q-td key="signUpStartTime" :props="props" >
                          {{ props.row.rfqHeaderEntity.signUpStartTime }}
                        </q-td>
                        <q-td key="signUpEndTime" :props="props" >
                          {{ props.row.rfqHeaderEntity.signUpEndTime }}
                        </q-td>
                        <q-td key="quoteStatus" :props="props" >
                          <q-chip v-if="props.row.quoteStatus == 1" dense square color="positive">已报价</q-chip>
                          <q-chip v-if="props.row.quoteStatus == 0" dense square color="light">未报价</q-chip>
                          <q-chip v-if="props.row.quoteStatus == 2" dense square color="info">报价中</q-chip>
                        </q-td>
                        <q-td key="isClose" :props="props" >
                          <q-chip v-if="props.row.rfqHeaderEntity.isClose == 1" dense square color="positive">是</q-chip>
                          <q-chip v-if="props.row.rfqHeaderEntity.isClose == 0" dense square color="light">否</q-chip>
                        </q-td>
                        <q-td key="purExecutorName" :props="props" >
                          {{ props.row.rfqHeaderEntity.purExecutorName }}
                        </q-td>
                        <q-td key="createTime" :props="props" >
                          {{ props.row.rfqHeaderEntity.createTime }}
                        </q-td>
                        <q-td key="createUserName" :props="props" >
                          {{ props.row.rfqHeaderEntity.createUserName }}
                        </q-td>
                        <q-td key="remark" :props="props" >
                          {{ props.row.rfqHeaderEntity.remark }}
                        </q-td>
                      </q-tr>
                      <q-tr v-show="props.expand" :props="props">
                        <q-td colspan="100%">
                          审核原因：{{ props.row.rfqHeaderEntity.approveReason }}
                        </q-td>
                      </q-tr>
                    </template>
                  </q-table>
                  <div class="row justify-end items-center text-faded">
                    每页的行数：
                    <q-select 
                      :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                      hide-underline
                      class="q-mr-md"
                      v-model="serverPagination.rowsPerPage"></q-select>
                    第
                    <q-pagination
                      class="q-mt-xs"
                      v-model="serverPagination.page"
                      input
                      boundary-links
                      direction-links
                      :max-pages="5"
                      :ellipses="true"
                      :max="pages"></q-pagination>
                    页 &nbsp; 共 {{ total }} 条
                  </div>
                  <q-inner-loading :visible="visible">
                    <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
                  </q-inner-loading>
                </q-card-main>
              </q-card>
            </q-tab-pane>
          </q-tabs>
        </q-page-container>
      </q-layout>
      <!-- TR 上传 -->
      <q-modal no-backdrop-dismiss v-model="trFileModal" :content-css="{minWidth: '44vw', minHeight: '400px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              <span>TR上传</span>
            </q-toolbar-title>
            <q-btn flat @click="trFileModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="bg-white no-shadow full-width">
            <q-card-main class="row justify-center gutter-x-md gutter-y-xs">
              <q-field 
                label="TR文件"
                orientation="vertical"
                :error="$v.trFileForm.trFileId.$error"
                error-label="该字段为必填项"
                class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
                <q-uploader 
                  ref="trFileUploader"
                  name="files"
                  @uploaded="fileUploaded"
                  :headers="{'Accept': 'application/json;charset=utf-8'}"
                  :url="uploadUrl+'TR_TEMPLATE'" ></q-uploader>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              glossy
              :loading="btnLoading"
              color="primary"
              size="sm"
              @click="trFileSaveConfirm">{{$t("保存")}}</q-btn>
            <q-btn
              glossy
              color="secondary"
              size="sm"
              class="q-ml-sm"
              @click="trFileModal = false">{{$t("取消")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/rfxPurList.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.use(window.vuelidate.default)
      var required = window.validators.required
			new Vue({
        el: '#q-rfxPurList',
        i18n: i18n,
				data: function() {
					return {
            // 通用
            uploadUrl: baseURL+'/manager/rfq/file/upload/',
            selectedTab: 'tab-1',
            btnLoading: false,
            listLoading: false,
            btnLoadingSearch: false,
            btnLoadingReset: false,
            visible:false,
            tableData: [],
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              rowsNumber: 10
            },
            total: 0,
            searchForm: {
              key: 'title',
              value: ''
            },
            options: [],
            // tab-1
            moreSearchOne: false,
            selectedOne: [],
            // TR上传
            trFileModal: false,
            currentSupId: '',
            trFileForm: {
              trFileId: ''
            }
          }
				},
        validations: {
          trFileForm: {
            trFileId: { required: required }
          }
        },
				computed: {
					columnsOne: function() {
						return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'code',
                label: '询价编码',
                align: 'center'
              },
              {
                name: 'title',
                label: '询价主题',
                align: 'center'
              },
              {
                name: 'isOfficial', // 0：否 1：是 
                label: '是否正式报价',
                align: 'center'
              },
              {
                name: 'isSeal', // (报价截止日期前不可查看供应商报价记录)  0：否 1：是 
                label: '是否密封报价',
                align: 'center'
              },
              {
                name: 'isTr', // (报价截止日期前不可查看供应商报价记录)  0：否 1：是 
                label: '是否TR',
                align: 'center'
              },
              {
                name: 'isSignUp', // 0：否 1：是 
                label: '是否需要报名',
                align: 'center'
              },
              {
                name: 'signUpStartTime',
                label: '报名开始时间',
                align: 'center',
                field: 'signUpStartTime',
                sortable: true
              },
              {
                name: 'signUpEndTime',
                label: '报名截止时间',
                align: 'center',
                field: 'signUpEndTime',
                sortable: true
              },
              {
                name: 'quoteStatus', // 0: 否 1:是 
                label: '报价状态',
                align: 'center'
              },
              {
                name: 'isClose', // 0: 否 1:是 
                label: '关闭状态',
                align: 'center'
              },
              {
                name: 'purExecutorName',
                label: '采购执行人',
                align: 'center'
              },
              {
                name: 'createTime',
                label: '创建时间',
                align: 'center',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'createUserName',
                label: '创建人',
                align: 'center'
              },
              {
                name: 'remark',
                label: '报价说明',
                align: 'center'
              }
						]
          },
          pages: function() {
            return Math.ceil(this.total/this.serverPagination.rowsPerPage)
          }
        },
        watch: {
          selectedTab: function(tab) {
            this.listGet({ pagination: this.serverPagination })
          },
          'serverPagination.page': function(rowsPerPage) {
            this.listGet({ pagination: this.serverPagination })
          },
          'serverPagination.rowsPerPage': function(rowsPerPage) {
            this.listGet({ pagination: this.serverPagination })
          }
        },
        created: function() {
          this.listGet({
            pagination: this.serverPagination
          })
        },
				methods: {
					listGet: function(arg) {
            var that = this
            this.visible=true,
            this.listLoading = true
            this.serverPagination = arg.pagination
            axios({
              method: 'post',
              url: '/manager/rfqvendor/main/query',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                'search_LIKE_rfqHeaderEntity.code': this.searchForm.key == 'code'? this.searchForm.value: '',
                'search_LIKE_rfqHeaderEntity.title': this.searchForm.key == 'title'? this.searchForm.value: '',
              }
            })
            .then(function(data) {
              that.tableData = data.rows
              that.total = data.total
              that.listLoading = false
              that.btnLoadingReset = false
              that.btnLoadingSearch = false
              setTimeout(function(){that.visible=false},500)

            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 主视图报名
           vendorEnquiryPriceView: function(headerId,id) {
             window.location.href = 'rfxVendorEnquiryPriceView.html?headerId=' + headerId+'&id='+id
          },
		  // 主视图报名
           vendorSignUp: function(headerId,id) {
              window.location.href = 'rfxVendorSignUp.html?headerId=' + headerId+'&id='+id
          },
         // 主视查看
          vendorQuotedPrice: function(headerId,id) {
            window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + headerId+'&id='+id
          },
          search: function() {
            this.btnLoadingSearch = true
            this.listGet({
              pagination: this.serverPagination
            })
          },
          reset: function () {
            this.btnLoadingReset = true
            this.searchForm = {
              key: 'title',
              value: ''
            }
            this.listGet({
              pagination: this.serverPagination
            })
          },
          uploadedTrFile: function(supId) {
            this.trFileModal = true
            this.currentSupId = supId
          },
          fileUploaded: function(file, xhr) {
            var res = JSON.parse(xhr.response)
            if (res.success) {
              this.$q.notify({
                message: '上传成功',
                type: 'positive',
                icon: 'done',
                timeout: 1000,
                position: 'top-right'
              })
              this.trFileForm.trFileId = res.data
            } else {
              this.$q.notify({
                message: res.msg,
                type: 'negative',
                icon: 'error_outline',
                timeout: 2000,
                position: 'top-right'
              })
            }
          },
          trFileSaveConfirm: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/rfqvendor/main/uploadTrFile/'+this.trFileForm.trFileId+'/'+this.currentSupId
            })
            .then(function(data) {
              if (data.success) {
                that.$q.notify({
                  message: '上传成功',
                  type: 'positive',
                  icon: 'done',
                  timeout: 1000,
                  position: 'top-right'
                })
                that.trFileModal = false
                that.listGet({
                  pagination: that.serverPagination
                })
              } else {
                that.$q.notify({
                  message: data.msg,
                  type: 'negative',
                  icon: 'error_outline',
                  timeout: 2000,
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          }
				}
			})
    </script>
  </body>
</html>